//封装获取id元素函数
function $(id){
    return document.getElementById(id);
};

//封装清空旧数据的函数
function cleanDom(){
    $("main").innerHTML = `
    <h2>
    <strong>Person</strong>
    <span>Wealth</span>
    </h2>
    `;

    // 打开状态
    flag = true;
}

//存储当前操作数据
let nowData = []; 
//初始值
let index = 0;
// 设置开关(用于显示总金额)
let flag = true;


//给按钮添加点击事件
$("toggle").addEventListener("click",function(){
    //给body添加显示导航类名
    document.querySelector("body").classList.toggle("show_nav")
});




//添加账户
$("add-user").addEventListener("click",function(){
    //判断是否到达最大值
    if(index >= dataInfo.length) return;

    //每次添加的数据全部放进nowData数组中保存
    nowData.push(dataInfo[index]);

    //渲染页面
    let newH2 = document.createElement("h2");
    //``模板字符串 es6新语法
    newH2.innerHTML = `
    <strong>${dataInfo[index].name}</strong>
    <span>$ ${(dataInfo[index].money).toLocaleString()}</span>
    `;
    $("main").appendChild(newH2);

    //自增放后面
    index++;

})

//资金翻倍
$("double").addEventListener("click",function(){
    //清空旧数据
    cleanDom();

    nowData.forEach(function(item){
        //数据翻倍（需要重新赋值，改变原数据）
        item.money = item.money * 2
        let newH2 = document.createElement("h2");
        //``模板字符串 es6新语法
        newH2.innerHTML = `
        <strong>${item.name}</strong>
        <span>$ ${(item.money).toLocaleString()}</span>
        `;
        $("main").appendChild(newH2)
    })
})



//查询百万富翁
$("show-millionaire").addEventListener("click",function(){
    //清空旧数据
    cleanDom();

    //过滤nowData数据，是否存在1000000
    nowData = nowData.filter(function (item){
        return item.money >= 1000000;
    })

    nowData.forEach(function(item){
        let newH2 = document.createElement("h2");
        //``模板字符串 es6新语法
        newH2.innerHTML = `
        <strong>${item.name}</strong>
        <span>$ ${(item.money).toLocaleString()}</span>
        `;
        $("main").appendChild(newH2)
    });
});

//财富榜
$("sort").addEventListener("click",function(){
    cleanDom();

    nowData.sort(function (a,b){
        return b.money - a.money
    });

    nowData.forEach(function (item){
        let newH2 = document.createElement("h2");
        newH2.innerHTML = `
        <strong>${item.name}</strong>
        <span>$ ${(item.money).toLocaleString()}</span>
        `;
        $("main").appendChild(newH2)
    });
});

//计算总额
$("calculate").addEventListener("click", function () {
    let sum = 0;
    // 累加
    sum = nowData.reduce(function (total, current, currentIndex, arr) {
      return total += current.money;
    }, 0);
  
    let newH2 = document.createElement("h2");
    // `` 模版字符串 es6新语法
    newH2.innerHTML = `
      <strong>总金额</strong>
      <span>$ ${(sum).toLocaleString()}</span>
      `;
    
    // 判断是否可以继续显示总金额
    if (flag) {
      $("main").appendChild(newH2);
      // 关闭状态
      flag = false;
    };
  
  });